<script setup>

</script>

<template>
    <div class="app-container">
        <!-- 顶部导航栏 -->
        <t-header @search="handleSearch" />

        <!-- 主内容区 -->
        <div class="main-content container">
            <!-- 侧边分类导航 -->
            <t-category-nav :categories="categories" v-if="showCategoryNav" />

            <!-- 路由视图 -->
            <router-view />
        </div>

        <!-- 底部信息 -->
        <t-footer />

        <!-- 悬浮购物车 -->
        <float-cart :count="cartCount" @click="goToCart" />
    </div>
</template>

<script>
import THeader from '@/components/THeader.vue'
import TCategoryNav from '@/components/TCategoryNav.vue'
import TFooter from '@/components/TFooter.vue'
import FloatCart from '@/components/FloatCart.vue'
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

export default {
    components: { THeader, TCategoryNav, TFooter, FloatCart },
    setup() {
        const store = useStore()
        const router = useRouter()

        const categories = [
            { id: 1, name: '女装', icon: 'el-icon-shopping-bag-1' },
            { id: 2, name: '男装', icon: 'el-icon-user' },
            { id: 3, name: '美妆', icon: 'el-icon-magic-stick' },
            { id: 4, name: '数码', icon: 'el-icon-mobile-phone' },
            { id: 5, name: '食品', icon: 'el-icon-food' },
            { id: 6, name: '家居', icon: 'el-icon-house' },
            { id: 7, name: '母婴', icon: 'el-icon-present' },
            { id: 8, name: '运动', icon: 'el-icon-basketball' }
        ]

        const cartCount = computed(() => store.getters.cartCount)

        const showCategoryNav = computed(() => {
            return router.currentRoute.value.path !== '/cart' &&
                router.currentRoute.value.path !== '/user' &&router.currentRoute.value.path !== '/kefu'
        })

        const handleSearch = (keyword) => {
            router.push({ path: '/search', query: { q: keyword } })
        }

        const goToCart = () => {
            router.push('/cart')
        }

        return {
            categories,
            cartCount,
            showCategoryNav,
            handleSearch,
            goToCart
        }
    }
}
</script>

<style scoped>
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content {
    display: flex;
    flex: 1;
    margin-top: 20px;
}
</style>